
<ul class="list-group p-0">
    <div *ngIf="streamList.length != 0">
    </div>
    <div *ngIf="streamList.length == 0">
        <li class="list-group-item list-group-item-action list-group-item-light">
            <div class="media">
                <div class="media-body">
                    <div class="mt-0 mb-1" style="text-align: center;">
                        <h5 class="d-inline mr-3 align-middle text-dark">
                            <button type="button" class="btn btn-info btn-lg" routerLink="../add-stream">
                                <i class="fa fa-plus mr-1"></i>
                                <span>You don't have a stream yet. Please click this button to create a stream for the current edgex.</span> 
                            </button>
                        </h5>
                    </div>
                </div>
            </div>
        </li>
    </div>
    <li *ngFor="let stream of streamList" class="list-group-item list-group-item-action list-group-item-light">
        <div class="media">
            <div class="align-self-center mr-3">
                <i class="fa fa-tags fa-2x text-secondary"></i>  
            </div>
            <div class="media-body">
                <div class="mt-0 mb-1">
                    <h5 class="d-inline mr-3 align-middle text-dark">{{stream}}</h5>
                </div>
                <div>
                    <span class="badge badge-info mr-3" role="button" (click)="streamDetail(stream)">{{stream}} Details</span>

                    <span class="badge badge-secondary float-right" role="button" (click)="deleteConfirm()"  style="margin-left: 1%;"> <i class="fa fa-trash mr-1"></i> Delete</span>
                    <span class="badge badge-success float-right" role="button" (click)="toEditStream()"> <i class="fa fa-edit mr-1"></i> Edit</span>
                </div>
            </div>
        </div>
    </li>
</ul>


<div class="modal fade" id="deleteConfirmDialog" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="deleteConfirmDialogLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-danger" id="deleteConfirmDialogLabel">
                    <i class="fa fa-warning"></i>
                    Warning
                </h5>  
            </div>
            <div class="modal-body">
                The data will be permanently erased!!! Are you sure to execute delete operation？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" (click)="delete()">Confirm</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="streamDetailDialog" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="ruleDetailDialogLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-primary" id="ruleDetailDialogLabel">
                    Stream Details
                </h5>
            </div>
            <div class="modal-body">
                <pre class="mt-2 bg-secondary p-2 text-light rounded">{{streamTempStr}}</pre>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>